<!-- 个人中心页面 -->
<template>
  <div class="person-view">
    <!-- 导航栏 -->
    <nav-bar :activeComponent="activeComponent" @updateUserInfo="handleUserInfoUpdate"></nav-bar>

    <!-- 个人中心主体区域 -->
    <div class="person-container">
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <div class="user-profile">
          <div class="avatar-container">
            <img :src="user.avatar || defaultAvatar" alt="用户头像" class="avatar">
          </div>
          <div class="user-name">{{ user.userName || '用户名' }}</div>
          <div class="user-level">Lv.{{ user.level || 0 }}</div>
          <div class="user-stats">
            <div class="stat-item">
              <div class="stat-value">{{ user.exp || 0 }}</div>
              <div class="stat-label">经验</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ user.coin || 0 }}</div>
              <div class="stat-label">硬币</div>
            </div>
          </div>
        </div>
        <div class="menu-divider"></div>
        <ul class="menu-list">
          <li :class="{ active: activeComponent === 'info' }" @click="activeComponent = 'info'">
            <el-icon><UserFilled /></el-icon>个人信息
          </li>
          <li :class="{ active: activeComponent === 'posts' }" @click="activeComponent = 'posts'">
            <el-icon><Document /></el-icon>我的帖子
          </li>
          <li :class="{ active: activeComponent === 'guides' }" @click="activeComponent = 'guides'">
            <el-icon><Reading /></el-icon>我的攻略
          </li>
          <li :class="{ active: activeComponent === 'favorites' }" @click="activeComponent = 'favorites'">
            <el-icon><Star /></el-icon>我的收藏
          </li>
          <li :class="{ active: activeComponent === 'settings' }" @click="activeComponent = 'settings'">
            <el-icon><Setting /></el-icon>账号设置
          </li>
        </ul>
      </div>

      <!-- 右侧内容区 -->
      <div class="content">
        <div class="content-header">
          <h2>{{ getComponentTitle() }}</h2>
          <el-button v-if="showAuthCheckButton" @click="checkAuth" type="primary" size="small">
            登录检查
          </el-button>
        </div>

        <div class="content-body">
          <!-- 个人信息 -->
          <div v-if="activeComponent === 'info'" class="component-container">
            <infoView :userInfo="user" @updateUserInfo="handleUpdateUserInfo"></infoView>
          </div>

          <!-- 我的帖子 -->
          <div v-if="activeComponent === 'posts'" class="component-container">
            <ArticleView></ArticleView>
          </div>

          <!-- 我的攻略 -->
          <div v-if="activeComponent === 'guides'" class="component-container">
            <GuideView></GuideView>
          </div>

          <!-- 我的收藏 -->
          <div v-if="activeComponent === 'favorites'" class="component-container">
            <FavoriteView></FavoriteView>
          </div>

          <!-- 账号设置 -->
          <div v-if="activeComponent === 'settings'" class="component-container">
            <EditView :user="user"></EditView>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import infoView from "@/components/Person/Info.vue";
import ArticleView from "@/components/Person/Article.vue";
import GuideView from "@/components/Person/GuideView.vue"; // 新增的攻略组件
import FavoriteView from "@/components/Person/FavoriteView.vue";
import EditView from "@/components/Person/EditPerson.vue";
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  UserFilled,
  Document,
  Star,
  Setting,
  Reading
} from '@element-plus/icons-vue';
import store from "@/store";

export default {
  name: "PersonView",
  components: {
    NavBar,
    infoView,
    ArticleView,
    GuideView,  // 注册新组件
    FavoriteView,
    EditView
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn;
    },
    showAuthCheckButton() {
      // 仅在开发环境或管理员账号显示登录检查按钮
      return process.env.NODE_ENV === 'development';
    }
  },
  setup() {
    // 当前激活的功能页面
    const activeComponent = ref("info");
    const router = useRouter();
    const route = useRoute();
    const deletedata = reactive({});
    const total = ref(0);
    const defaultAvatar = ref('/images/default-avatar.png');

    const user = ref({
      userId: '',
      userName: '',
      avatar: '',
      level: 1,
      person: {
        birthday: '',
        signature: '',
        gender: '',
        email: 'example@example.com',
        phone: '12345678901',
      },
      password: {
        old: '',
        new: ''
      },
      exp: 3498,      // 当前经验值
      nextExp: 99999, // 下一等级所需经验
      coin: 574.4,    // 硬币数量
      bio: '这里是个人简介，介绍一下自己。'
    });

    // 获取当前选中组件的标题
    const getComponentTitle = () => {
      switch(activeComponent.value) {
        case 'info': return '个人信息';
        case 'posts': return '我的帖子';
        case 'guides': return '我的攻略';
        case 'favorites': return '我的收藏';
        case 'settings': return '账号设置';
        default: return '';
      }
    };

    const handleUserInfoUpdate = (updatedUserInfo) => {
      console.log(`更新:`, updatedUserInfo);
      Object.assign(user.value, {
        userId: updatedUserInfo.userId,
        userName: updatedUserInfo.userName,
        avatar: updatedUserInfo.avatar,
        exp: updatedUserInfo.exp,
        coin: updatedUserInfo.coin,
        bio: updatedUserInfo.bio,
        level: updatedUserInfo.level,
        password: {
          old: updatedUserInfo.password
        },
        person: {
          ...user.value.person,
          birthday: updatedUserInfo.birthday,
          signature: updatedUserInfo.bio, // 假设 `signature` 对应 `bio`
          gender: updatedUserInfo.gender,
          email: updatedUserInfo.email,
          phone: updatedUserInfo.phone,
        }
      });
    };

    // 处理子组件的 `updateUserInfo` 事件
    const handleUpdateUserInfo = (settings) => {
      console.log(`ttttttttttt`, settings);
      activeComponent.value = settings; // 合并新数据
    };

    const checkAuth = () => {
      const isLoggedIn = computed(() => store.getters.isLoggedIn);
      if(isLoggedIn.value){
        const userId = store.state.userInfo?.userId
        alert(userId);
      }
      else
        alert("未登录");
    };

    // 组件挂载后尝试获取用户信息
    onMounted(() => {
      // 这里可以添加获取用户信息的逻辑
      // 例如从store获取或通过API请求
    });

    return {
      activeComponent,
      handleUserInfoUpdate,
      checkAuth,
      user,
      handleUpdateUserInfo,
      getComponentTitle,
      defaultAvatar,
      // eslint-disable-next-line vue/no-dupe-keys
      showAuthCheckButton: process.env.NODE_ENV === 'development'
    };
  }
};
</script>

<style scoped>
/* ======= 整体页面背景和字体 ======= */
.person-view {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  min-height: 100vh;
  padding-bottom: 30px;
}

/* ======= 个人中心主体区域，左右布局 ======= */
.person-container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-height: 600px;
}

/* ======= 左侧菜单 ======= */
.sidebar {
  width: 230px;
  background-color: #fff;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}

.user-profile {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  margin: 0 auto 12px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e6f7ff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #222;
}

.user-level {
  font-size: 14px;
  color: #00a1d6;
  margin-bottom: 12px;
  font-weight: 500;
}

.user-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.menu-divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 8px 0;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.menu-list li {
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.menu-list li:hover {
  background-color: #f6f6f6;
  color: #00a1d6;
}

.menu-list li.active {
  background-color: #e6f7ff;
  color: #00a1d6;
  border-left: 3px solid #00a1d6;
}

.menu-list li .el-icon {
  font-size: 18px;
}

/* ======= 右侧内容区 ======= */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.content-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.content-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.component-container {
  background-color: #fff;
  border-radius: 8px;
  height: 100%;
}

/* ======= 账号设置 ======= */
.account-settings {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 媒体查询 - 移动端适配 */
@media (max-width: 768px) {
  .person-container {
    flex-direction: column;
    margin: 10px;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }

  .user-profile {
    padding: 15px;
  }

  .content-header {
    padding: 12px 16px;
  }

  .content-body {
    padding: 16px;
  }
}
</style>